<template>
  <q-dialog v-model="isVisible" persistent>
    <q-card>
      <q-card-section class="row items-center">
        <div class="col-10">
          <div class="text-h6">{{ alarm.msg }}</div>
          <div>{{ alarm.craneNo }} - {{ alarm.alarmCode }}</div>
        </div>
        <div class="col-2 text-right">
          <q-btn v-if="alarm.confirm" flat round icon="close" @click="handleConfirm" />
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  name: 'AlarmPopup',
  props: {
    alarm: {
      type: Object,
      required: true,
    },
    modelValue: {
      type: Boolean,
      required: true,
    },
  },
  setup(props, { emit }) {
    const isVisible = ref(props.modelValue);

    watch(
      () => props.modelValue,
      newVal => {
        isVisible.value = newVal;
        if (!props.alarm.confirm && newVal) {
          setTimeout(() => {
            isVisible.value = false;
            emit('update:modelValue', false);
          }, 5000);
        }
      },
    );

    const handleConfirm = () => {
      emit('update:modelValue', false);
    };

    return {
      isVisible,
      handleConfirm,
    };
  },
});
</script>

<style scoped>
.q-card {
  max-width: 400px;
  width: 100%;
}
</style>
